<template>
  <div>
    <Card>
      <div class="new-home-top">
        <div class="top-left">
          <img src="../../../assets/index/boss.png">
          <div class="top-left-content">
            <span class="top-left-text-a">{{ Hello }}～{{ userInfo.name }}</span>
            <span class="top-left-text-b">{{ userInfo.roleName }}｜****保险股份有限公司</span>
          </div>
        </div>
        <div class="top-right">
          <div class="top-right-content">
            <div class="top-right-title">当前俱乐部</div>
            <div class="top-right-result-one">王牌俱乐部</div>
          </div>
          <div class="top-right-content">
            <div class="top-right-title">当前排名</div>
            <div class="top-right-result-two">
              <span>1</span>/<span>10</span>
            </div>
          </div>
          <div class="top-right-content">
            <div class="top-right-title">我的星级</div>
            <div class="top-right-result-three">
              <img src="../../../assets/image/myStar.png">
              ×6
            </div>
          </div>
        </div>
      </div>
    </Card>
    <Row :gutter="20" style="margin-top:18px">
      <Col span="16" style="padding-right: 10px;">
        <div class="new-home-card">
          <div class="card-top">
            <div class="card-top-title">
              <span class="card-top-line"></span>
              <span class="card-top-text">{{ month }}月达成率</span>
            </div>
            <div class="card-top-more" @click="$router.push('/statisticalAnalysis/achievementRate')">
              <span>更多</span>
              <Icon type="ios-arrow-forward" />
            </div>
          </div>
          <div class="radio-box">
            <div @click="radioCli(1)" :class="{ 'active': radio == 1 }">保费</div>
            <div @click="radioCli(2)" :class="{ 'active': radio == 2 }" style="margin-left:10px">件数</div>
          </div>
          <div class="echarts-box">
            <div v-for="(item, index) in achievementRateList" :key="index" class="echarts-item">
              <div :id="'achievementRate' + index" style="width:157px;height:157px;"></div>
              <div class="echarts-byte">
                <span style="color: #999"><span :class="['crl', 'achievementRate' + index]"></span> 实收{{ radio == 1 ? '保费' :
                  '件数' }}</span>
                <span>{{ item[radio == 1 ? 'allReceipts' : 'allReceiptCount'] || 0 }}{{ radio == 1 ? '元' :
                  '件' }}</span>
              </div>
              <div class="echarts-byte">
                <span style="color: #999">应收{{ radio == 1 ? '保费' :
                  '件数' }}</span>
                <span>{{ item[radio == 1 ? 'allReceivables' : 'allReceivableCount'] || 0 }}{{ radio == 1 ? '元' :
                  '件' }}</span>
              </div>
              <div class="echarts-byte">
                <span style="color: #999">预估达成率</span>
                <span>{{ item[radio == 1 ? 'allEsArPremium' : 'allEsArCount'] }}</span>
              </div>
            </div>
          </div>
        </div>
      </Col>
      <Col span="8" style="padding-left: 10px;">
        <div class="new-home-card">
          <div class="card-top">
            <div class="card-top-title">
              <span class="card-top-line"></span>
              <span class="card-top-text">
                {{ `${userInfo.roleId != 19 && userInfo.roleId != 21 ? '专员回复' : '领导评价'}` }}
              </span>
            </div>
            <div class="card-top-more" @click="$router.push('/searchInfo/commentList')">
              <span>更多</span>
              <Icon type="ios-arrow-forward" />
            </div>
          </div>
          <div style="height: 335px;overflow-y: scroll;">
            <div v-for="(item, index) in indexComment" :key="index"
              :class="['rating-box', index == indexComment.length - 1 ? 'border-none' : '']">

              <!-- <span v-if="userInfo.roleId != 19 && userInfo.roleId != 21" class="top-box">{{ item.commentname }}对你给“<span
                  class="ellipsis-line">{{ item.type }}{{ item.contno }}</span>”的点评给出了回复</span> -->
              <span v-if="userInfo.roleId != 19 && userInfo.roleId != 21" class="top-box">{{ item.commentname }}对你给“
                <Tooltip :content="item.type + item.contno">
                  <span style="margin-top: 7px;width: 80px;" class="ellipsis-line">{{ item.type
                  }}{{ item.contno }}</span>
                </Tooltip>”的点评给出了回复
              </span>

              <span v-else class="top-box">{{ item.commentname }}对你的“
                <Tooltip :content="item.type + item.contno">
                  <span @click="tohistoryW(item)" style="margin-top: 7px;width: 130px;" class="ellipsis-line">{{ item.type
                  }}{{ item.contno }}</span>
                </Tooltip>”给出点评
              </span>

              <div class="rating-text" style="margin:10px 0">评价等级：{{ item.level }}星</div>
              <div class="rating-text">评价内容：{{ item.comment || '无点评' }}</div>
              <div v-if="item.replyComment && userInfo.roleId != 19 && userInfo.roleId !=
                21" class="rating-text" style="margin:10px 0;word-wrap: break-word">回复内容：{{ item.replyComment }}</div>
            </div>
          </div>
        </div>
      </Col>
    </Row>
    <Card style="margin-top:18px">
      <!-- 专员 -->
      <Tabs v-if="userInfo.roleId == 21" :animated="false" v-model="tabsP">
        <TabPane :label="`督导件 ${totalObj.superviseNumber || ''}`" name="1">
          <supervise typeIndex="1"></supervise>
        </TabPane>
        <TabPane :label="`收费件 ${totalObj.chargeNumber || ''}`" name="2">
          <charge typeIndex="2"></charge>
        </TabPane>
        <TabPane :label="`失效件 ${totalObj.invalidNumber || ''}`" name="3">
          <disabled typeIndex="3"></disabled>
        </TabPane>
        <TabPane :label="`终止件 ${totalObj.terminateNumber || ''}`" name="4">
          <end typeIndex="4"></end>
        </TabPane>
        <!-- <template #extra>
          <div class="more" style="top: 8px;z-index:99;" @click="toPool">
            <span>前往工作池处理</span>
            <Icon type="ios-arrow-forward" />
          </div>
        </template> -->
      </Tabs>
      <!-- 内勤、主管 -->
      <!-- <Tabs v-else-if="userInfo.branchType" :animated="false" v-model="tabsW"> -->
      <Tabs v-else-if="userInfo.roleId" :animated="false" v-model="tabsW">
        <TabPane :label="`未失效 ${totalObj.validityNumber || ''}`" name="未失效">
          <invalid></invalid>
        </TabPane>
        <TabPane :label="`已失效 ${totalObj.invalidNumber || ''}`" name="已失效">
          <disabled-w></disabled-w>
        </TabPane>
        <TabPane :label="`终止件 ${totalObj.terminateNumber || ''}`" name="终止件">
          <end-w typeIndex="2"></end-w>
        </TabPane>
        <!-- <template #extra>
          <div class="more" style="top: 8px;z-index:99;" @click="toworkConditionSum">
            <span>前往工作状况统计</span>
            <Icon type="ios-arrow-forward" />
          </div>
        </template> -->
      </Tabs>

      <!-- <Menu active-name="1" @on-select="onSelectChange" mode="horizontal" theme="light" style="margin-bottom:18px">
        <MenuItem name="1">
        督导件
        <Badge :count="5"></Badge>
        </MenuItem>
        <MenuItem name="2">
        收费件
        <Badge :count="total2"></Badge>
        </MenuItem>
        <MenuItem name="3">
        失效件
        <Badge :count="total3"></Badge>
        </MenuItem>
        <MenuItem name="4">
        终止件
        <Badge :count="total3"></Badge>
        </MenuItem>
      </Menu>
      <supervise v-if="selectName == 1" typeIndex="1"></supervise>
      <charge v-if="selectName == 2" typeIndex="2"></charge>
      <disabled v-if="selectName == 3" typeIndex="3"></disabled>
      <end v-if="selectName == 4" typeIndex="4"></end> -->
    </Card>
    <Row :gutter="20" style="margin-top:18px">
      <Col span="16" style="padding-right: 10px;">
        <div class="new-home-card" style="height: 308px;">
          <div class="card-top">
            <div class="card-top-title">
              <span class="card-top-line"></span>
              <span class="card-top-text">续期原野</span>
            </div>
          </div>
          <div style="width: 100%;">
            <img style="width: 100%;" src="../../../assets/home/xqyy.png" alt="">
          </div>
        </div>
      </Col>
      <Col span="8" style="padding-left: 10px;">
        <div class="new-home-card" style="height: 308px;">
          <div class="card-top">
            <div class="card-top-title">
              <span class="card-top-line"></span>
              <span class="card-top-text">知识库</span>
            </div>
          </div>
          <div class="knows-content">
            <div class="content-item">
              <img src="../../../assets/home/a.png" alt="">
              <div class="content-item-text">督导</div>
            </div>
            <div class="content-item">
              <img src="../../../assets/home/b.png" alt="">
              <div class="content-item-text">培训</div>
            </div>
            <div class="content-item">
              <img src="../../../assets/home/c.png" alt="">
              <div class="content-item-text">人管</div>
            </div>
            <div class="content-item">
              <img src="../../../assets/home/d.png" alt="">
              <div class="content-item-text">业管</div>
            </div>
            <div class="content-item">
              <img src="../../../assets/home/e.png" alt="">
              <div class="content-item-text">品管</div>
            </div>
            <div class="content-item">
              <img src="../../../assets/home/f.png" alt="">
              <div class="content-item-text">企划</div>
            </div>
            <div class="content-item">
              <img src="../../../assets/home/g.png" alt="">
              <div class="content-item-text">其他</div>
            </div>
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import Supervise from "./components/supervise.vue";
import charge from "./components/charge.vue";
import disabled from "./components/disabled.vue";
import end from "./components/end.vue";
import invalid from "./components/workConditionSum/invalid.vue";
import disabledW from "./components/workConditionSum/disabled.vue";
import endW from "./components/workConditionSum/end.vue";
const echarts = require("echarts");
export default {
  name: "home",
  components: { Supervise, charge, disabled, end, invalid, disabledW, endW },
  data() {
    return {
      radio: 1,
      listen: null,
      userInfo: {},
      selectName: 1,
      tabsW: "未失效",
      tabsP: "1",
      month: "",
      Hello: "",
      achievementRateList: [{}, {}, {}],
      indexComment: [{
        commentname: '李专员',
        type: '督导件',
        contno: '213202122163056',
        level: '五星',
        comment: '下次及时联系',
        replyComment: '好的，下次一定注意，谢谢主管提醒',
      }, {
        commentname: '曹专员',
        type: '督导件',
        contno: '712202030025656',
        level: '四星',
        comment: '下次及时联系',
        replyComment: '好的，下次一定注意，谢谢主管提醒',
      }],
      totalObj: {
        "validityNumber": 4565,
        "invalidNumber": 1643,
        "terminateNumber": 979
      },
      option: {
        // tooltip: {
        //   trigger: "item",
        // },
        color: ["#F8F8F8"], // "#F88D67"
        series: [
          {
            type: "pie",
            radius: ["75%", "90%"],
            avoidLabelOverlap: true,
            label: {
              show: true,
              fontSize: 16,
              fontWeight: "bold",
              position: "center",
              formatter: "", // 48%\n当月达成率
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: "bold",
                formatter: "", // 48%\n当月达成率
              },
            },
            // data: [{ value: 0.48, name: "当月达成率" }, { value: 0.52 }],
          },
        ],
      },
      color: ["#F88D67", "#58CA86", "#A09FFF"],
    };
  },
  mounted() {
    this.Hello = this.getHello();
    let date = new Date(),
      year = date.getFullYear(),
      month = date.getMonth() + 1;

    this.month = year + "-" + (month > 9 ? month : "0" + month);
    this.getUserInfo();
    this.getIndexComment();
    this.getTotal();
    this.getAchievingRate();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.listenFun());
  },
  methods: {
    getAchievingRate() {
      this.apiB
        .AllAchievingRateHome({ visitType: "0", analyzeDate: this.month })
        .then((res) => {
          if (res.code == 200) {
            // this.achievementRateList = res.data;
            this.achievementRateList = [
              {
                "allReceivableCount": "8873",
                "allReceivables": "198865589.68",
                "allReceivablesT": "19886.56",
                "allReceiptCount": "2996",
                "allReceipts": "59979058.32",
                "allReceiptsT": "7089.19",
                "allArCount": "33.8%",
                "allArPremium": "30.2%",
                "allAchievingRate": "32.0%",
                "allEsReceiptCount": "3276",
                "allEsArCount": "36.9%",
                "allEsReceipts": "70891869.07",
                "allEsArPremium": "35.6%"
              },
              {
                "allReceivableCount": "7372",
                "allReceivables": "177747165.11",
                "allReceivablesT": "17774.72",
                "allReceiptCount": "5432",
                "allReceipts": "120512674.28",
                "allReceiptsT": "13937.41",
                "allArCount": "73.7%",
                "allArPremium": "67.8%",
                "allAchievingRate": "70.8%",
                "allEsReceiptCount": "5903",
                "allEsArCount": "80.1%",
                "allEsReceipts": "139374050.96",
                "allEsArPremium": "78.4%"
              },
              {
                "allReceivableCount": "6231",
                "allReceivables": "156392897.93",
                "allReceivablesT": "15639.29",
                "allReceiptCount": "5207",
                "allReceipts": "127106329.45",
                "allReceiptsT": "13813.43",
                "allArCount": "83.6%",
                "allArPremium": "81.3%",
                "allAchievingRate": "82.5%",
                "allEsReceiptCount": "5413",
                "allEsArCount": "86.9%",
                "allEsReceipts": "138134322.17",
                "allEsArPremium": "88.3%"
              }
            ];
            this.radioCli(this.radio, true);
          } else this.$Message.info(res.msg);
        });
    },
    radioCli(n, b) {
      // console.log(b);
      this.radio = n;
      this.achievementRateList.forEach((item, index) => {
        let dataSourcePie = echarts.init(
          document.getElementById("achievementRate" + index)
        );
        let option = JSON.parse(JSON.stringify(this.option));
        option.color.unshift(this.color[index]);
        let type = "",
          listen = "";
        if (index == 0) {
          type = "当月达成率";
          listen = "Month";
        }
        if (index == 1) {
          type = "宽一达成率";
          listen = "Kuanyi";
        }
        if (index == 2) {
          type = "宽末达成率";
          listen = "Kuanmo";
        }

        // item.allArPremium = "20%";
        // item.allArCount = "30%";

        let formatter = `${item[`${n == 1 ? "allArPremium" : "allArCount"}`]
          }\n${type}`;

        option.series[0].label.formatter = formatter;
        option.series[0].emphasis.label.formatter = formatter;
        let num = this.toPoint(
          item[`${n == 1 ? "allArPremium" : "allArCount"}`]
        );
        option.series[0].data = [
          { value: num, name: type },
          { value: 1 - num },
        ];

        console.log("option", option, option.series[0].label.formatter);

        dataSourcePie.setOption(option);
        this[`listen${listen}`] = dataSourcePie;
        if (b) {
          window.addEventListener(
            "resize",
            this.listenFun(this[`listen${listen}`])
          );
        }
      });
    },
    toPoint(percent) {
      var str = percent.replace("%", "");
      str = str / 100;
      return str;
    },
    // listenFun() {
    //   this.listenMonth.resize();
    //   this.listenKuanyi.resize();
    //   this.listenKuanmo.resize();
    listenFun(listen) {
      listen.resize();
    },
    tohistoryW(item) {
      this.$router.push({
        name: 'historyW', query: {
          planid: item.planid,
          contno: item.contno,
          paytodate: item.paytodate,
        }
      })
    },
    toPool() {
      this.$router.push({
        name: "workPool",
        query: { tabIndex: this.tabsP },
      });
    },
    toworkConditionSum() {
      this.$router.push({
        name: "workConditionSum",
        query: { tab: this.tabsW },
      });
    },
    getHello() {
      let now = new Date(),
        hour = now.getHours();
      if (hour < 6) return "凌晨好";
      else if (hour < 9) return "早上好";
      else if (hour < 12) return "上午好";
      else if (hour < 14) return "中午好";
      else if (hour < 17) return "下午好";
      else if (hour < 19) return "傍晚好";
      else if (hour < 21) return "晚上好";
      else return "深夜好";
    },
    // 获取PC端首页工作池数量
    getTotal() {
      return
      this.apiB.getPCWorkIndexSize().then((res) => {
        if (res.code == 200) {
          this.$set(
            this,
            "totalObj",
            res.data.pcWorkIndexAtAttachSizeVO ||
            res.data.pcWorkIndexAtManagerSizeVO
          );
        } else this.$Message.info(res.msg);
      });
    },

    // 获取用户信息
    getUserInfo() {
      this.apiB.getUserInfo().then((res) => {
        // this.userInfo.userName = res.data.name;
        // this.userInfo.userCode = res.data.employeeNO;
        // this.userInfo.userRole = res.data.roleName;
        // this.userInfo.userBussiness = res.data.managecomName;
        // this.userInfo.imgUrl = res.data.employeeIcon;
        this.userInfo = res.data;
        console.log(this.userInfo);

        localStorage.setItem("userInfo", JSON.stringify(res.data));

        // this.getOneYearStars();
        // this.selectMyClubList();
        // this.getAllRanking();
        sessionStorage.setItem("roleId", res.data.roleId);
      });
    },
    //领导评价
    getIndexComment() {
      return
      this.indexComment = [];
      this.apiB.leadershipevaluation({ index: 1, pageSize: 5 }).then((res) => {
        if (res.code == 200 && res.data != null) {
          this.indexComment = res.data.records;
        } else this.$Message.info(res.msg);
      });
    },
    // 切换视图
    onSelectChange(name) {
      console.log(name);
      this.selectName = name;
    },
  },
};
</script>

<style>
.ivu-table .table-bgc td {
  background: #fff4f4;
}
</style>
<style lang="less" scoped>
.new-home-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .top-left{
    display: flex;
    align-items: center;
    img{
      width: 80px;
      height: 80px;
      margin-right: 10px;
      border-radius: 50%;
    }
    .top-left-content{
      display: flex;
      flex-direction: column;
      .top-left-text-a{
        font-size: 22px;
        font-weight: 600;
        color: #1D1D1D;
        padding: 6px 0;
      }
      .top-left-text-b{
        color: #999;
        font-size: 14px;
        padding: 6px 0;
      }
    }
  }
  .top-right{
    display: flex;
    align-items: center;
    .top-right-content{
      width: 180px;
      padding: 0 10px;
      margin: 10px 0;
      .top-right-title{
        font-size: 14px;
        font-weight: 400;
        color: #A5A5A5;
        text-align: center;
      }
      .top-right-result-one, .top-right-result-three{
        font-size: 20px;
        font-weight: 600;
        color: #1D1D1D;
        img{
          width: 28px;
          height: 28px;
        }
      }
      .top-right-result-two{
        span:nth-child(1){
          font-size: 20px;
          font-weight: 600;
          color: #1D1D1D;
        }
        span:nth-child(2){
          font-size: 14px;
          font-weight: 400;
          color: #A5A5A5;
        }
      }
      .top-right-result-one, .top-right-result-two, .top-right-result-three {
        text-align: center;
      }
      .top-right-result-three {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .top-right-content:nth-child(1), .top-right-content:nth-child(2){
      border-right: 1px solid #ECECEC;
    }
  }
}
.new-home-card{
  height: 385px;
  background: #ffffff;
  border-radius: 8px;
  .card-top{
    height: 50px;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .card-top-title{
      display: flex;
      align-items: center;
      flex-direction: row;
    }
    .card-top-line{
      width: 4px;
      height: 16px;
      background: #2D49F7;
      margin-right: 20px;
    }
    .card-top-text{
      color: #1D1D1D;
      font-size: 20px;
      font-weight: 600;
    }
    .card-top-more {
      right: 20px;
      font-weight: 400;
      color: #999999;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .knows-content{
    display: flex;
    flex-wrap: wrap;
    padding: 40px 20px;
    .content-item{
      width: 25%;
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-bottom: 20px;
      img{
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
      .content-item-text{
        font-size: 14px;
        font-weight: 400;
        color: rgba(0,0,0,0.9);
        line-height: 20px;
        text-align: center;
      }
    }
  }
}


.top-box {
  display: flex;
  align-items: center;
}

.top-box>img {
  width: 60px;
}

.card-div {
  position: relative;
  height: 385px;
  background: #ffffff;
  border-radius: 8px;
}

.box-title {
  position: relative;
  height: 50px;
  border-bottom: 1px solid #f2f2f2;
}

.line {
  width: 4px;
  height: 16px;
  background: #ff4722;
  margin-right: 20px;
}

.more {
  position: absolute;
  right: 20px;
  font-weight: 400;
  color: #999999;
  font-size: 14px;
}

.radio-box {
  position: absolute;
  right: 20px;
  margin-top: 20px;
  color: #666666;
}

.radio-box>div {
  display: inline-block;
  width: 92px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  border-radius: 8px;
  border: 1px solid #eeeeee;
}

.active {
  background: #fff4ed;
  color: #ff4722;
  font-weight: 500;
  border: none !important;
}

.echarts-box {
  display: flex;
  justify-content: space-around;
  align-content: center;
  margin-top: 72px;
}

.echarts-item {
  display: flex;
  flex-direction: column;
  align-content: space-between;
  justify-items: center;
  margin-left: 5px;
}

.echarts-byte {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

.crl {
  position: absolute;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  left: -14px;
  top: 8px;
}

.achievementRate0 {
  background: #f88d67;
}

.achievementRate1 {
  background: #58ca86;
}

.achievementRate2 {
  background: #a09fff;
}

.rating-box {
  margin: 15px 20px;
  padding-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
  color: #2a2a2a;
  border-bottom: 1px solid #eee;
}

.ellipsis-line {
  display: inline-block;
  /* width: 80px; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ff4722;
}

.rating-text {
  font-size: 14px;
  color: #999999;
}

.border-none {
  border: none;
}
</style>
